<template>
  <div class="login">
    <div class="bg">

    </div>
    <div class="logo-wrap">
      <img class="logo"
        src="@/assets/image/logo.png"
        alt="" />
      <span class="title">全国统一生产经营管理平台</span>
      <span class="gap">|</span>
      <span class="subtitle">电子地图系统</span>
    </div>
    <div class="login-box-bg">
      <div class="login-box">
        <div class="welcome">欢迎登录!</div>
        <div class="inputs">
          <el-form :model="formData"
            ref="loginform"
            :rules="rules">
            <el-form-item prop="account">
              <div class="input-wrap">
                <i class="iconfont left icon-yonghu"></i>
                <input class="input"
                  type="text"
                  placeholder="请输入账号/手机号"
                  v-model="formData.account" />
              </div>
            </el-form-item>
            <el-form-item prop="password">
              <div class="input-wrap">
                <i class="iconfont left icon-mima"></i>
                <input ref="pwd"
                  class="input"
                  :type="pwdtype"
                  placeholder="请输入密码"
                  v-model="formData.password" />
                <i class="iconfont right icon-xianshi"
                  @click="pwdtype = 'text'"
                  v-if="pwdtype === 'password'"></i>
                <i class="iconfont right icon-yincang"
                  @click="pwdtype = 'password'"
                  v-if="pwdtype === 'text'"></i>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <div class="submit-btn"
          v-loading="loading"
          element-loading-background="rgba(225,225,255,.5)"
          @click="submitForm">
          登录
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    props: {},
    data() {
      return {
        loading: false,
        formData: {
          account: '',
          password: ''
        },
        rules: {
          password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
          account: [{ required: true, message: '账号不能为空', trigger: 'blur' }]
        },
        pwdtype: 'password'
      };
    },
    mounted() {
      document.onkeydown = () => {
        let key = window.event.keyCode;
        if (key == 13) {
          this.submitForm();
        }
      };
    },
    methods: {
      submitForm() {
        this.$refs.loginform.validate((valid) => {
          if (valid) {
            this.loading = true;
            let userParams = {
              username: this.formData.account,
              password: this.formData.password
            };
            //调用登录接口
            setTimeout(() => {
              const userinfo = { name: '张三', role: 'guo' };
              sessionStorage.setItem('userinfo', JSON.stringify(userinfo));

              this.$store.dispatch('permission/generateRoutes').then((res) => {
                const formUrl = this.$route.query.formUrl;
                if (formUrl && formUrl !== '/') {
                  window.location.href = formUrl;
                } else {
                  this.$router.push({ path: '/onemap', replace: true });
                }
              });
            }, 1000);
          } else {
            this.formData.password = '';
            return;
          }
        });
      }
    },
    beforeDestroy() {
      document.onkeydown = '';
    }
  };
</script>

<style lang="scss" scoped>
  .login {
    position: relative;
    width: 100%;
    height: 100vh;
    .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('@/assets/image/bg-login.jpg') center no-repeat;
      background-size: cover;
    }
    .logo-wrap {
      position: absolute;
      width: 100%;
      height: $--head-H;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      top: 14vh;
      .logo {
        height: calc($--head-H - 20px);
        border-radius: $--general-radius;
        padding: 2px;
        margin-right: 10px;
      }
      .title {
        font-size: 24px;
        letter-spacing: 8px;
      }
      .gap {
        font-size: 24px;
        margin: 0 10px;
      }
      .subtitle {
        font-size: 20px;
        letter-spacing: 4px;
      }
    }
    .login-box-bg {
      position: absolute;
      top: 30vh;
      left: 50%;
      margin-left: -245px;
      width: 490px;
      height: 56vh;
      background-color: rgba(225, 225, 255, 0.4);
      border-radius: 10px;
      padding: 10px;
    }
    .login-box {
      width: 100%;
      height: 100%;
      background-color: #fff;
      padding: 0 28px;
      border-radius: 10px;
      box-sizing: border-box;
      .welcome {
        font-size: 28px;
        padding-top: 18%;
        text-align: center;
        margin-bottom: 10%;
      }
      .tabs {
        width: 100%;
        display: flex;
        margin-bottom: 20px;
        .tab-item {
          width: 50%;
          padding: 15px 0;
          text-align: center;
          border-bottom: 2px solid #e3e7ec;
          cursor: default;
          &.active {
            color: $--primary-color;
            border-bottom: 2px solid $--primary-color;
          }
        }
      }
      .inputs {
        width: 100%;
        margin-bottom: 10%;
        .input-wrap {
          position: relative;
          width: 100%;
          .input {
            width: 100%;
            padding-left: 40px;
            border: none;
            height: 50px;
            outline: none;
            border-bottom: 1px solid $--border-color;
            box-sizing: border-box;
          }
          .selet {
            width: 100%;
            padding-left: 25px;
            margin-top: 7px;
            border: none;
            height: 50px;
            outline: none;
            border-bottom: 1px solid $--border-color;
          }
          :deep(.el-input__inner) {
            border: none;
            box-shadow: none;
          }
          .iconfont {
            position: absolute;
            top: 8px;
          }
          .left {
            left: 10px;
          }
          .right {
            right: 10px;
            cursor: pointer;
          }
          .right-padding {
            padding-right: 140px;
          }
        }
      }
      .submit-btn {
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
        background-color: $--primary-color;
        text-align: center;
        color: #fff;
        font-size: 18px;
        letter-spacing: 8px;
        box-shadow: 2px 4px 8px rgba(0, 112, 210, 0.5);
        margin-bottom: 30px;
        cursor: pointer;
      }
      .jump {
        text-align: center;
        .gap {
          margin: 0 20px;
        }
      }
      .link {
        font-size: 14px;
        cursor: pointer;
        &:hover {
          color: $--primary-color;
        }
      }
    }
  }
</style>
